<template>
	<view class="Cooperate">
		<view class="Cooperate_top">加盟膜兄弟施工门店</view>
		<view class="Cooperate_content">
			<view class="Cooperate_content_list">
				<view class="content_list_left"><span>*</span>门店名称</view>
				<view class="content_list_right">
					<input type="text" v-model="formData.store_name" placeholder="请输入门店名称" />
				</view>
			</view>

			<view class="Cooperate_content_list">
				<view class="content_list_left"><span>*</span>所在区域</view>
				<view class="content_list_right">
					<k-region @region-event="handleRegionEvent"></k-region>
				</view>
			</view>
			<view class="Cooperate_content_list">
				<view class="content_list_left"><span>*</span>详细地址</view>
				<view class="content_list_right">
					<input type="text" v-model="formData.address" placeholder="请输入详细路名门牌号信息" />
				</view>
			</view>
			<view class="Cooperate_content_list">
				<view class="content_list_left"><span>*</span>联系人</view>
				<view class="content_list_right">
					<input type="text" v-model="formData.contact_name" placeholder="请输入联系人" />
				</view>
			</view>
			<view class="Cooperate_content_list">
				<view class="content_list_left"><span>*</span>手机号码</view>
				<view class="content_list_right">
					<input type="text" v-model="formData.mobile" placeholder="请输入手机号码" />
				</view>
			</view>
		</view>
		<view class="Cooperate_title"><span>*</span>相关照片</view>
		<view class="Cooperate_img">
			<view class="Cooperate_img_list" @click="uploadImage('storeImage')">
				<view class="img_list_top">
					<image class="list_top_icon" v-show="!showStoreImage" style="height: 80upx;"
						src="../../static/img.svg"></image>
					<image class="list_top_img" v-show="showStoreImage" mode="heightFix" :src="storeImageUrl"></image>
				</view>
				<view class="img_list_title">门店形象照</view>
			</view>
			<view class="Cooperate_img_list" @click="uploadImage('licenseImage')">
				<view class="img_list_top">
					<image class="list_top_icon" v-show="!showLicenseImage" style="height: 80upx;"
						src="../../static/img.svg"></image>
					<image class="list_top_img" v-show="showLicenseImage" mode="heightFix" :src="licenseImageUrl">
					</image>
				</view>
				<view class="img_list_title">营业执照</view>
			</view>
			<view class="Cooperate_img_list" @click="uploadImage('ConstructionImage')">
				<view class="img_list_top">
					<image class="list_top_icon" v-show="!showConstructionImage" style="height: 80upx;"
						src="../../static/img.svg"></image>
					<image class="list_top_img" v-show="showConstructionImage" mode="heightFix" :src="ConstructionImageUrl">
					</image>
				</view>
				<view class="img_list_title">施工车间1</view>
			</view>
			<view class="Cooperate_img_list" @click="uploadImage('ConstructionImage2')">
				<view class="img_list_top">
					<image class="list_top_icon" v-show="!showConstructionImage2" style="height: 80upx;"
						src="../../static/img.svg"></image>
					<image class="list_top_img" v-show="showConstructionImage2" mode="heightFix" :src="ConstructionImageUrl2">
					</image>
				</view>
				<view class="img_list_title">施工车间2</view>
			</view>
		</view>

		<view class="Cooperate_btn">
		  <button class="Cooperate_btn_button" :disabled="isDisabled" @click="submitForm">提交加盟申请单</button>
		  <view class="Cooperate_btn_protocol">
			<checkbox-group style="transform: scale(.7);" @change="handleCheckboxChange">
			  <checkbox :value="agreeProtocol" />
			</checkbox-group>
			请您同意<span @click="showNWindow">《膜兄弟合作协议》</span>
		  </view>
		</view>
		<view class="NWindow" v-show="NWindow">
		  <view class="NWindow_content">
			<view class="NWindow_content_title">膜兄弟合作协议</view>
			<view class="NWindow_content_txt">您完成注册后，可以在膜兄弟平台上成为施工服务商。施工方和平台之间没有劳动、劳务、承包关系。您选定施工方的同时，您的服务合同/服务订单即刻自动生成。
<br>您需要遵守膜兄弟漆面保护膜安装规范，确保在安装前车辆已经经过了充分的清洗和干燥。同时，要确保车辆停放在一个干净、无尘的环境中，以避免在安装过程中对车辆造成污染。施工完成交付后需要上传拍摄照片。
</view>
			<view class="NWindow_content_btn">
			  <button @click="agreeNWindow">已知晓</button>
			</view>
		  </view>
		</view>
		
		
	</view>
</template>

<script>
	import KRegion from '@/components/k-region/k-region.vue'; // Adjust the path accordingly
	export default {
		  components: {
			'k-region': KRegion,
		  },		
		data() {
			return {
				formData:[],
				showStoreImage: false,
				storeImageUrl: '',
				showLicenseImage: false,
				licenseImageUrl: '',
				showConstructionImage: false,
				ConstructionImageUrl: '',
				showConstructionImage2: false,
				ConstructionImageUrl2: '',
				agreeProtocol: false, // 是否同意协议的标志
				NWindow: false,  // 控制NWindow的显示状态
			}
		},
		onLoad() {

		},
		computed: {
			isDisabled() {
			  return !this.agreeProtocol;
			},
		},
		methods: {
			//发送给朋友
			onShareAppMessage() {
			  return {
				title: '膜兄弟施工门店加盟',
				imageUrl: '../../static/banner1.jpg',
				path: '/pages/index/Join'
			  }
			},		
			//分享到朋友圈
			onShareTimeline(res) { 
				return {
					title: "膜兄弟施工门店加盟",
					imageUrl: '../../static/banner1.jpg',
				}
			},			
			handleCheckboxChange() {
			  this.agreeProtocol = !this.agreeProtocol;
			},
			showNWindow() {
			  this.NWindow = true;
			},
			agreeNWindow() {
			  // 处理用户点击同意按钮的逻辑
			  this.NWindow = false; // 隐藏NWindow，可以根据业务需求进行处理
			},
			//监听省市区
			handleRegionEvent(data){
				this.formData.province=data[0];
				this.formData.city=data[1];
				this.formData.area=data[2];

			},
			submitForm() {
				if (!this.agreeProtocol) {
				console.log('请先同意协议');
				return;
				}
				this.uni_request({
				  url: '/index.php/index/member/add',
				  method:"get",
				  data:this.formData,
				  // 其他请求参数...
				  success: (res) => {
				    //跳转成功页面(成功页里点击确定跳转到首页)
					uni.navigateTo({
						url: '/pages/index/JoinSuccess'
					});
					console.log("ok");
				  },
				});
			},
			//上传图片
			uploadImage(imageType) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						uni.compressImage({
							src: tempFilePath,
							quality: 80,
							compressedWidth:1200,
							success: (compressRes) => {
								// 根据传入的imageType选择更新哪个图片的状态
									//上传门店头照片
									  uni.uploadFile({
										url: this.serverUrl+'/index.php/index/member/upload', // 后台接收图片的API地址
										filePath: compressRes.tempFilePath,
										name: 'file', // 后台接收文件的字段名
										success: (uploadRes) => {
										  // 上传成功，处理后台返回的数据
										  const data = JSON.parse(uploadRes.data);
										  console.log(imageType);
										  if (data.status === 1) {
												if (imageType === 'storeImage') {
												    this.formData.photo_store=data.path;//將url保存到form表單里
												    this.storeImageUrl = compressRes.tempFilePath;//显示图片										
													this.showStoreImage = true;
												} else if (imageType === 'licenseImage') {
													this.formData.photo_certificate=data.path;//將url保存到form表單里
													this.licenseImageUrl = compressRes.tempFilePath;
													this.showLicenseImage = true;
												} else if (imageType === 'ConstructionImage') {
													this.formData.photo_workshop1=data.path;//將url保存到form表單里
													this.ConstructionImageUrl = compressRes.tempFilePath;
													this.showConstructionImage = true;
												} else if (imageType === 'ConstructionImage2') {
													this.formData.photo_workshop2=data.path;//將url保存到form表單里
													this.ConstructionImageUrl2 = compressRes.tempFilePath;
													this.showConstructionImage2 = true;
												}	

										  } else {
											uni.showToast({
												title: data.msg,
												duration: 3000,
												"icon": "none"
											});
										  }
										},
										fail: (uploadErr) => {
											uni.showToast({
												title: '图片上传失败', uploadErr,
												duration: 3000,
												"icon": "none"
											});											
										  // 处理上传失败的逻辑
										},
									  });									
									//

							},
							fail: (err) => {
								console.error('压缩图片失败', err);
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败', err.errMsg);
					}
				});
			},
		},

	}
</script>

<style>
	.NWindow{ position: fixed; left: 0; top: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10;}
	.NWindow .NWindow_content{ background: #fff; border-radius: 10upx; width: 90%; padding: 35upx; box-sizing: border-box;}
	.NWindow .NWindow_content .NWindow_content_title{ color: #111; font-size: 34upx; text-align: center; margin-bottom: 25upx; font-weight: bolder;}
	.NWindow .NWindow_content .NWindow_content_txt{ line-height: 1.5; font-size: 28upx; color: #666;}
	.NWindow .NWindow_content .NWindow_content_btn{ margin-top: 50upx;}
	.NWindow .NWindow_content .NWindow_content_btn button{ background: #e60012; border: 0; color: #fff;}
	
	.Cooperate {
		padding: 35upx 0px;
	}

	.Cooperate .Cooperate_top {
		text-align: center;
		height: 120upx;
		background: #e60012;
		line-height: 120upx;
		font-size: 34upx;
		color: #fff;
		border-radius: 20upx;
		width: calc(100% - 70upx);
		margin: 0 auto;
	}

	.Cooperate .Cooperate_content {
		padding: 0px 35upx;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 0px;
		border-bottom: 1px solid #ededed;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list:last-child {
		border-bottom: 0;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list .content_list_left {
		font-size: 30upx;
		color: #111;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list .content_list_left span {
		color: #e60012;
		margin-right: 12upx;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list .content_list_right {
		width: calc(100% - 150upx);
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list .content_list_right input {
		text-align: right;
		font-size: 30upx;
		color: #111;
		width: 100%;
	}

	.Cooperate .Cooperate_content .Cooperate_content_list .content_list_right k-region {
		width: 100%;
	}

	.Cooperate .Cooperate_content .Cooperate_content_map {
		text-align: center;
		height: 120upx;
		background: #e60012;
		line-height: 120upx;
		font-size: 34upx;
		color: #fff;
		border-radius: 20upx;
		margin: 50upx 0px;
	}

	.Cooperate .Cooperate_title {
		font-size: 30upx;
		color: #111;
		line-height: 100upx;
		background: #f5f5f5;
		padding: 0px 35upx;
	}

	.Cooperate .Cooperate_title span {
		color: #e60012;
		margin-right: 12upx;
	}

	.Cooperate .Cooperate_img {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 35upx;
	}

	.Cooperate .Cooperate_img .Cooperate_img_list {
		width: 48%;
		margin-bottom: 35upx;
	}

	.Cooperate .Cooperate_img .Cooperate_img_list .img_list_top {
		border: 1px solid #ededed;
		height: 200upx;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Cooperate .Cooperate_img .Cooperate_img_list .img_list_top img {
		max-width: 100%;
	}

	.Cooperate .Cooperate_img .Cooperate_img_list .img_list_top .list_top_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.Cooperate .Cooperate_img .Cooperate_img_list .img_list_title {
		text-align: center;
		font-size: 30upx;
		margin-top: 25upx;
	}

	.Cooperate .Cooperate_btn {
		padding: 0px 35upx;
		padding-bottom: 55upx;
	}

	.Cooperate .Cooperate_btn .Cooperate_btn_button {
		text-align: center;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #e60012;
		border-radius: 10upx;
		border: 0px;
	}
	.Cooperate .Cooperate_btn .Cooperate_btn_button[disabled]{ background-color: #999;}
	.Cooperate .Cooperate_btn .Cooperate_btn_button::after{ display: none;}
	.Cooperate .Cooperate_btn .Cooperate_btn_protocol{ font-size: 26upx; margin-top: 25upx; display: flex; align-items: center; justify-content: center; color: #666;}
	.Cooperate .Cooperate_btn .Cooperate_btn_protocol span{ color: #e60012;}
</style>